<template>
  <el-card>
    <div>
      <el-image class="intro-banner" :src="IntroBgImage" fit="cover"></el-image>
      <div class="intro-bottom">
        <div class="info">
          <div class="intro-avator">
            <avator size="100%" />
          </div>
          <h2 class="name">小谢的个人博客</h2>
        </div>
        <div class="desc">
          <p>前端开发工程师，专注于前端开发，热爱技术，喜欢分享。</p>
        </div>
        <div class="menus">
          <template v-for="item in menuList" :key="item.title">
            <smart-link :to="item.link">
              <el-tag type="info">{{ item.title }}({{ item.value }})</el-tag>
            </smart-link>
          </template>
        </div>
        <div class="contact">
          <template v-for="item in contactList" :key="item.title">
            <el-tooltip :content="item.title" placement="top">
              <smart-link :to="item.link">
                <component :is="item.icon" class="icon"></component>
              </smart-link>
            </el-tooltip>
          </template>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import IntroBgImage from '@/assets/images/intro-bg.jpg'
import ArcticonsBilibili from '~icons/arcticons/bilibili';
import MdiGithub from '~icons/mdi/github';
import IcBaselineWechat from '~icons/ic/baseline-wechat';
import AntDesignQqCircleFilled from '~icons/ant-design/qq-circle-filled';
import { shallowRef } from 'vue';
import { getBasicInfo } from '@/service/module';
const menuList = ref([{
  title: '关于',
  value: 1,
  link: '/more/about'
}])
const contactList = shallowRef([
  {
    icon: ArcticonsBilibili,
    title: 'Bilibili',
    link: 'https://space.bilibili.com/440429400'
  },
  {
    icon: MdiGithub,
    title: 'Github',
    link: 'https://github.com/xiaoxie-github'
  },
  {
    icon: IcBaselineWechat,
    title: '微信',
    link: 'https://mp.weixin.qq.com/s/123456'
  },
  {
    icon: AntDesignQqCircleFilled,
    title: 'QQ',
    link: 'https://wpa.qq.com/123456'
  }])
onMounted(async() => { 
  const basicInfo = await getBasicInfo()
  console.log(basicInfo)
  menuList.value = [{
    title: '文章',
    value: basicInfo.articleCount,
    link: '/'
  },
  {
    title: '相册',
    value: basicInfo.albumCount,
    link: '/album'
  },
  {
    title: '说说',
    value: basicInfo.momentCount,
    link: '/talk'
    }, ...menuList.value]
})
</script>
<style lang="scss" scoped>
.el-card {
  --el-card-padding: 0 !important;
}

.intro-banner {
  width: 100%;
  height: 140px;
  display: block;
}

.intro-bottom {
  padding: 0 10px 20px;

  .info {
    display: flex;
    height: 30px;

    .intro-avator {
      width: 60px;
      height: 60px;
      flex-shrink: 0;
      transform: translateY(-50%);
    }

    .name {
      margin-left: 10px;
      align-self: center;
    }
  }

  .desc {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
  }

  .menus {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .contact {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;

    .icon {
      font-size: 1.5rem;
      // color: #666;
      cursor: pointer;
      transition: all .3s;

      &:hover {
        color: #409eff;
      }
    }
  }
}
</style>